<template>
  <div>
    <custom-table
      ref="tableRef"
      :loading="loading"
      :columns="columns"
      :tableData="tableData"
      :typeSelect="true"
      :isPagination="false"
      @selectionChange="selectionChange"
      @toggleRowSelect="toggleRowSelect"
      class="table_box"
      :maxHeight="600"
    >
      <template #uploadTaskCount="{ scope }">
        <span
          :class="[
            scope.row.uploadedTaskCount == scope.row.uploadTaskCount &&
            scope.row.uploadTaskCount
              ? 'green'
              : 'red',
          ]"
        >
          {{ scope.row.uploadedTaskCount }}
        </span>
        <span class="green">/{{ scope.row.uploadTaskCount }}</span>
      </template>
      <template #reviewStatus="{ scope }">
        <el-tag v-if="scope.row?.reviewStatus === 1" type="warning">
          未提审
        </el-tag>
        <el-tag v-else-if="scope.row?.reviewStatus === 2" type="success">
          审核中
        </el-tag>
        <el-tag v-else-if="scope.row?.reviewStatus === 3" type="success">
          审核通过
        </el-tag>
        <el-tag v-else-if="scope.row?.reviewStatus === 4" type="danger">
          审核失败
        </el-tag>
      </template>
    </custom-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import customTable from "@/components/CustomTable/index.vue";
import { reviewApps } from "@/api/operateCenter/episode/index";
import { useRoute } from "vue-router";
import { cloneDeep } from "lodash-es";

const tableRef = ref();
const route = useRoute();
const id = ref(Number(route.query?.id));

const loading = ref<boolean>(false);
const selectionData = ref<Array<any>>([]);
const tableData = ref<Array<any>>([]);

const twoData = ref(
  JSON.parse(localStorage.getItem("twoData") as string) || ""
);

// console.log("twoData------", twoData.value);
// console.log("tableRef------", tableRef.value);

const toggleRowSelect = (val: Record<string, any>, selected: boolean) => {
  // console.log("val---", val, "selected---", selected);
};

const columns = reactive([
  {
    prop: "app",
    label: "小程序名称",
    minWidth: 120,
    formatter: (row: Record<string, any>) => {
      return `${row.app.appName}`;
    },
  },
  {
    prop: "app",
    label: "小程序类型",
    minWidth: 120,
    formatter: (row: Record<string, any>) => {
      return `${row.app.appType == "wx" ? "微信小程序" : "抖音小程序"}`;
    },
  },
  {
    prop: "uploadTaskCount",
    label: "媒资同步数",
    minWidth: 120,
    slotName: "uploadTaskCount",
    formatter: (row: Record<string, any>) => {
      return `${row.uploadedTaskCount}/${row.uploadTaskCount}`;
    },
  },
  {
    prop: "reviewStatus",
    slotName: "reviewStatus",
    label: "审核状态",
    minWidth: 100,
  },
]);

const getList = (val = 0) => {
  loading.value = true;
  reviewApps(id.value)
    .then((res: any) => {
      tableData.value = res;
    })
    .finally(() => {
      loading.value = false;
    });
};

// 多选
const selectionChange = (val: any) => {
  selectionData.value = val;
};

onMounted(() => {
  getList();
});

defineExpose({
  selectionData,
});
</script>
<style scoped lang="scss"></style>
